debounce-fn

What is debounce-fn?

The debounce-fn npm package provides a simple and efficient way to debounce functions in JavaScript. Debouncing is a technique used to limit the rate at which a function is executed. This is particularly useful for performance optimization in scenarios where a function is called repeatedly in quick succession, such as during window resizing, scrolling, or keypress events.

What are debounce-fn's main functionalities?

Basic Debouncing

This feature allows you to debounce a function with a specified wait time. In this example, the `expensiveFunction` will only be called once every 200 milliseconds, even though `debouncedFunction` is called every 50 milliseconds.

const debounceFn = require('debounce-fn');

const expensiveFunction = () => {
  console.log('Expensive function called');
};

const debouncedFunction = debounceFn(expensiveFunction, { wait: 200 });

// Call the debounced function multiple times
setInterval(debouncedFunction, 50);

Immediate Execution

This feature allows the debounced function to be executed immediately on the first call, and then debounced for subsequent calls. In this example, `logMessage` is executed immediately on the first call, and then debounced for 200 milliseconds.

const debounceFn = require('debounce-fn');

const logMessage = () => {
  console.log('Function executed immediately');
};

const debouncedLogMessage = debounceFn(logMessage, { wait: 200, immediate: true });

debouncedLogMessage(); // Executes immediately
setTimeout(debouncedLogMessage, 100); // Will not execute
setTimeout(debouncedLogMessage, 300); // Executes after 300ms

Cancel Debounced Function

This feature allows you to cancel a debounced function before it gets executed. In this example, `fetchData` is debounced with a wait time of 300 milliseconds, but the second call to `debouncedFetchData.cancel()` cancels the execution.

const debounceFn = require('debounce-fn');

const fetchData = () => {
  console.log('Fetching data');
};

const debouncedFetchData = debounceFn(fetchData, { wait: 300 });

debouncedFetchData();
debouncedFetchData.cancel(); // Cancels the debounced function

Other packages similar to debounce-fn

lodash.debounce

The lodash.debounce package is a popular utility for debouncing functions. It is part of the Lodash library, which provides a wide range of utility functions for JavaScript. Compared to debounce-fn, lodash.debounce offers more configuration options and is widely used in the JavaScript community.

debounce

The debounce package is a lightweight utility for debouncing functions. It provides a simple API similar to debounce-fn but with fewer configuration options. It is suitable for users who need a minimalistic solution for debouncing functions.

throttle-debounce

The throttle-debounce package provides both throttling and debouncing utilities. It is useful for scenarios where you need both functionalities. Compared to debounce-fn, throttle-debounce offers a more comprehensive solution for rate-limiting function executions.

README

debounce-fn

Return a debounced version of the given function

Install

$ npm install debounce-fn

Usage

var debounce = require('debounce-fn')
var yo = debounce(printYo, 300) // debounce for 300ms. default is 250ms.

yo()
yo()
yo()
setTimeout(yo, 300)

// first two calls will be debounced, and will give two outputs:
// "yo"
// "yo"

function printYo () {
  console.log('yo')
}